<script setup lang="ts">
let randomImageUrl = ref("https://loremflickr.com/300/150?random=")
</script>

<template>
<div class="wrapper">
  <ul>
    <li><h2>卡片根据视窗自动断行标</h2></li>
    <li><h2>图片在卡片中水平垂直居中</h2></li>
  </ul>
  <div class="container">
    <div class="item" v-for="item in 20" :key="item">
      <img :src="randomImageUrl + item" alt="">
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">

.container {
  width: 50vw;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  border: 4px solid red;
  padding: 1.5rem;

  .item {
    background: rebeccapurple;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 1.5rem;

    img {
      aspect-ratio: 16 / 9;
      max-width: 50%;
      min-content: fit-content;
      filter: drop-shadow(1px 1px 2px rgb(255 255 255 / 0.5))
      drop-shadow(-1px -1px 2px rgb(255 255 255 / 0.5));
      mix-blend-mode: luminosity;
      border-radius: 4px 4px 0 0;
    }
  }

}

</style>
